<template>
  <div class='preview'>
    <!-- 对话框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <!-- 内容区 -->
      <el-row>
        <!-- 题型 -->
        <el-col :span="6" v-if='dataList.questionType === "1"'>【题型】：单选</el-col>
        <el-col :span="6" v-else-if='dataList.questionType === "2"'>【题型】：多选</el-col>
        <el-col :span="6" v-else-if='dataList.questionType === "3"'>【题型】：简单</el-col>
        <!-- 编号 -->
        <el-col :span="6">【编号】：{{dataList.id}}</el-col>
        <!-- 难度 -->
        <el-col :span="6"  v-if='dataList.difficulty === "1"'>【难度】：简单</el-col>
        <el-col :span="6"  v-else-if='dataList.difficulty === "2"'>【难度】：一般</el-col>
        <el-col :span="6"  v-else-if='dataList.difficulty === "3"'>【难度】：困难</el-col>
        <!-- 标签 -->
        <el-col :span="6">【标签】：{{dataList.tags}}</el-col>
        <!-- 学科 -->
        <el-col :span="6" v-for="item in subjectList" :key="item.id" v-show ="item.value === dataList.subjectID">
            【学科】：{{item.label}}
        </el-col>
        <!-- 目录 -->
        <el-col :span="6" v-for="item in directory" :key="item.id" v-show="item.id === dataList.catalogID"  >
          【目录】：{{item.directoryName}}
        </el-col>
        <!-- 方向 -->
        <el-col :span="6">【方向】：{{dataList.direction}}</el-col>
      </el-row>
      <hr>
      <!-- 题干 -->
      <el-row>
        <el-col :span="24">【题干】：
          <div style="color:blue; margin-top:20px" v-html="dataList.question"></div>
          <!-- 题目 -->
          多选题 选项：（以下选中的选项为为正确答案)
          <!-- 表单 -->
          <!-- 题目内容 -->
          <el-form ref="form" :model="form">
              <!-- 单选框 -->
              <el-form-item v-if='dataList.questionType === "1"'>
                <el-radio-group :value="form.oddAnswer">
                    <el-radio
                      style="display:block;padding-top:20px"
                      :label="item.code"
                      name="type"
                      v-for="item in dataList.options"
                      :key="item.id">
                        {{item.code}} - {{item.title}}
                    </el-radio>
                </el-radio-group>
              </el-form-item>
            <!-- 多选框 -->
              <el-form-item v-if='dataList.questionType === "2"' style="margin-bottom:0px">
                <el-checkbox-group :value="form.bothAnswer">
                    <el-checkbox
                      style="display:block"
                      :label="item.code"
                      name="type"
                      v-for="item in dataList.options"
                      :key="item.id">
                      {{item.code}} - {{item.title}}
                    </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <hr>
      <!-- 参考答案 -->
      <el-row>
        <el-col :span="12">【参考答案】：<el-button type="danger" @click="hShow">视频答案预览</el-button></el-col>
      </el-row>
      <!-- 视频 -->
      <video :src="this.dataList.videoURL" width="270" height="150" controls="controls" autoplay="autoplay"  v-if="isShow"></video>
      <hr>
      <!-- 答案解析 -->
      <el-row>
        <el-col :span="12">
          【答案解析】：<span v-html="dataList.answer"></span>
        </el-col>
      </el-row>
      <hr>
      <!-- 题目备注 -->
      <el-row>
        <el-col :span="12">【题目备注】：{{dataList.remarks}}</el-col>
      </el-row>
      <!-- 关闭按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入题目详情Api / 获取二级目录列表
import { detail, directoryList } from '@/api/hmmm/questions.js'
// 引入方向
// import { direction } from '@/api/hmmm/constants.js'
export default {
  name: 'preview',
  props: ['subjectList'],
  data () {
    return {
      dialogVisible: false, // 对话框状态
      dataList: [], // 题目详情数据
      directory: [], // 二级目录列表
      isShow: false, // 视频显示状态
      form: {
        oddAnswer: null, // 单选框
        bothAnswer: [] // 复选框
      }
    }
  },
  methods: {
    // 视频按钮
    hShow () {
      // 判断是否存在视频
      if (this.dataList.videoURL) {
        this.isShow = !this.isShow
      } else {
        this.$message.error('无预览视频！')
      }
    },
    // 请求目录列表数据
    async getDirectory (id) {
      const res = await directoryList(id)
      this.directory = res.data.items
    },
    // 父元素点击预览开关
    async open (row) {
      // 将对话框设置为开启
      this.dialogVisible = true
      // 取出题目id
      const id = row.id
      // 发送请求
      const res = await detail({ id })
      // 将获取的数据赋值给data
      this.dataList = res.data
      // 判断题型是否为多选
      if (res.data.questionType === '2') {
        // 将多选框中的数组设置为空，防止打开对话框修改选项
        this.form.bothAnswer = []
        // 遍历options，获取每道题的数据
        res.data.options.forEach(item => {
          // 判断如果这道题是正确答案
          if (item.isRight === 1) {
            // 将这道题的选项添加到数组中
            this.form.bothAnswer.push(item.code)
          }
        })
        // 判断如果为单选框
      } else if (res.data.questionType === '1') {
        // 首先将绑定的数据设置为空
        this.form.oddAnswer = null
        // 遍历每一道题
        res.data.options.forEach(item => {
          // 如果题目isRight为1，则为正确答案
          if (item.isRight === 1) {
            // 将这道题的选项设置给单选框绑定的数据
            this.form.oddAnswer = item.code
          }
        })
      }
      // 调用目录函数，传递学科参数
      this.getDirectory(row.subjectID)
    },
    handleClose (done) {
      done()
      // 将视频关闭
      this.isShow = false
    }
  }
}
</script>

<style scoped lang='less'>
 .el-col{
   padding: 7px 0;
 }
</style>
